<template>
	<div>
		<!--高级查询-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="数据字典名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">添加</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--添加明细 / 编辑 模态框-->
		<el-dialog title="添加明细" :visible.sync="interiorAddFormVisible" :close-on-click-modal="false">
			<el-form :model="interiorAddForm" label-width="80px" :rules="interiorAddFormRules" ref="interiorAddForm">
				<el-form-item label="明细名" prop="name"><!--prop就是需要在绑定属性中定义规则-->
					<el-input v-model="interiorAddForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="interiorAddFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="interiorAddSubmit" :loading="interiorAddLoading">提交</el-button>
			</div>
		</el-dialog>
		<el-drawer title="数据字典明细表" :visible.sync="table" direction="rtl" size="50%">
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true">
					<el-form-item>
						<el-input v-model="query.keywordDetail" placeholder="数据字典名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getSearchDetail">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="interiorHandleAdd">添加</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data="gridData">
				<el-table-column property="id" label="编号" width="150"></el-table-column>
				<el-table-column property="name" label="明细名" width="200"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button size="mini" @click="interiorHandleEdit(scope.$index, scope.row)">修改</el-button>
						<el-button size="mini" type="danger" @click="interiorHandleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--抽屉里分页-->
			<el-pagination
					@size-change="interiorHandleSizeChange"
					@current-change="interiorHandleCurrentChange"
					:current-page="interiorQuery.CurrentPage"
					:page-sizes="[5, 10, 20, 30]"
					:page-size="interiorQuery.interiorPageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					style="float:right;"><!--表示显示靠右-->
			</el-pagination>


		</el-drawer>

		<!--列表-->
		<el-table :data="tableData" stripe style="width: 100%" @row-dblclick="handledbClick">
			<el-table-column prop="id" label="编号"></el-table-column>
			<el-table-column prop="name" label="数据字典名"></el-table-column>
			<el-table-column prop="" label="数据字典编号"></el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="query.currentPage"
				:page-sizes="[5, 10, 20, 30]"
				:page-size="query.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				style="float:right;"><!--表示显示靠右-->
		</el-pagination>

		<!--新增 / 编辑 模态框-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="字典名称" prop="name"><!--prop就是需要在绑定属性中定义规则-->
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="字典编号">
					<el-input v-model="addForm.sn" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
    export default {
        data() {
            return {
                tid: null,
                tableData: [],
                query: { // 查询
                    currentPage: 1,    //当前页
                    pageSize: 5, //每页显示的条数
                    keyword: '', // 高级查询
                    keywordDetail:""
                },
                total: 0,
                addFormVisible: false, // 默认隐藏弹出框
                addForm: { // 双向绑定数据
                    name: '',
                    sn: '',
                },
                addFormRules: { // 验证规则
                    name: [
                        {required: true, message: '请输入数据字典名称', trigger: 'blur'}
                    ],
                },
                addLoading: false, // 加载的效果

                gridData: [], //数据
                table: false,

                // 抽屉分页
                interiorQuery: {
                    CurrentPage: 1,    //当前页
                    PageSize: 5, //每页显示的条数
                    types_id: 0,
                },
                totals: 0,

                interiorAddFormVisible: false, // 默认隐藏弹出框
                interiorAddForm: { // 双向绑定数据
                    name: '',
                },
                interiorAddFormRules: {// 验证规则
                    name: [
                        {required: true, message: '请输入明细名', trigger: 'blur'}
                    ],
                },
                interiorAddLoading: false, // 加载的效果
            }
        },
        methods: { // 写方法
            getSearchDetail(){
                this.lodeListGridData();
			},
            // 抽屉控制
            handledbClick(row, event, column) {
                console.log(row, event, column);
                this.tid = row.id;
                this.interiorQuery.types_id = row.id;
                this.table = true;
                // 加载抽屉数据
                this.lodeListGridData();
            },
            // 抽屉数据np
            // 发送请求
            lodeListGridData() {
                this.$http.post("/systemDictionaryDetail/page", this.interiorQuery).then(res => {
                    this.gridData = res.data.rows; // 返回的分页数据
                    this.totals = res.data.totals;
                }).catch(res => {
                    //console.debug(result)
                })
            },
            // 先获取后台数据
            lodeListDict() {
                this.$http.post("/systemDictionaryType/page",this.query).then(res => {
                    // console.log(res);
                    this.tableData = res.data.rows; // 返回的分页数据
                    this.total = res.data.totals; // 查询数据条数
                })
            },
            // 修改
            handleEdit(index, row) {
                // console.log(index, row);
                // 数据进行回显
                this.addForm = Object.assign({}, row);
                // 调用下拉框里面的数据是负责人的数据
                this.lodeListDict();
                // 开启弹出模态框
                this.addFormVisible = true;
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // 当用户选择确定删除数据就会则执行回调的方法
                    // 发送请求,删除数据
                    this.$http.delete("/systemDictionaryType/" + row.id).then(res => {
                        // 解构
                        let {success, message} = res.data;
                        if (success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message.error("网络异常,删除失败!")
                        }
                        // 删除当前页的最后一条数据,就跳到前一页, 并且排除不是最后一页
                        if (this.tableData.length == 1 && this.query.currentPage != 1) {// listData查询当前页查询出来的数据
                            // 跳到上一页
                            this.query.currentPage--;
                        }
                        //重新加载列表数据
                        this.lodeListDict();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            // 操作每页展示的数据
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.query.pageSize = val;
                // 从新加载数据
                this.lodeListDict();

            },
            // 操作当前页
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.query.currentPage = val;
                // 从新加载数据
                this.lodeListDict();

            },
            // 高级查询
            getUsers() {
                // 初始化开始为第1页
                this.query.currentPage = 1;
                // 重新加载数据
                this.lodeListDict();
            },
            // 添加
            handleAdd() {
                // 清空数据
                this.addForm = {
                    name: '',
                    sn: '',
                }
                // 点击添加按钮时开启添加模态框
                this.addFormVisible = true;
            },
            // 提交
            addSubmit() {
                console.log(this.addForm);
                // 发送请求
                this.$http.post("/systemDictionaryType/save", this.addForm).then(res => {
                    // 解构
                    let {success, message} = res.data;
                    if (success) { // 后端返回的状态
                        // 成功
                        this.$message({ // elementUi里面的提供方法
                            message: '操作成功!!!',
                            type: 'success'
                        });
                    } else {
                        // 失败
                        this.$message.error('操作失败');
                    }
                    // 关闭弹出框
                    this.addFormVisible = false;
                    // 重新加载数据
                    this.lodeListDict();
                })
            },
            // 抽屉里面修改---------------------------------------------------------------------------------------------
            interiorHandleEdit(index, row) {
                // 数据进行回显
                this.interiorAddForm = Object.assign({}, row);
                // 点击添加按钮时开启添加模态框
                this.interiorAddFormVisible = true;
            },
            // 抽屉里面删除----------------------------------------
            interiorHandleDelete(index, row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // 当用户选择确定删除数据就会则执行回调的方法
                    // 发送请求,删除数据
                    this.$http.delete("/systemDictionaryDetail/" + row.id).then(res => {
                        // 解构
                        /*let {success, message} = res.data.rows;*/
                        //console.log(res);
						res = res.data;
                        if (res.success) {
                            this.$message({ // elementUi里面的提供方法
                                message: '操作成功!!!',
                                type: 'success'
                            });
                            this.lodeListGridData();
                        } else {
                            this.$message.error("网络异常,删除失败!")
                        }
                        // 删除当前页的最后一条数据,就跳到前一页, 并且排除不是最后一页
                        if (this.gridData.length == 1 && this.interiorQuery.interiorCurrentPage != 1) {// listData查询当前页查询出来的数据
                            // 跳到上一页
                            this.interiorQuery.interiorCurrentPage--;
                        }
                        // 加载抽屉数据
                        this.lodeListGridData();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 操作抽屉每页展示的数据
            interiorHandleSizeChange(val) {
                this.interiorQuery.PageSize = val;
                // 加载抽屉数据
                this.lodeListGridData();
            },
            // 操作抽屉当前页
            interiorHandleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.interiorQuery.CurrentPage = val;
                // 加载抽屉数据
                this.lodeListGridData();
            },
            // 抽屉添加
            interiorHandleAdd() {
                // 清空数据
                this.interiorAddForm = {
                    name: '',

                }
                // 在抽屉里添加页需要将types_id传到数据字典中
                this.interiorAddForm.types_id = this.tid;
                // 点击添加按钮时开启添加模态框
                this.interiorAddFormVisible = true;
            },
            // 抽屉提交数据
            interiorAddSubmit() {
                // 发送请求
                this.$http.post("/systemDictionaryDetail/save", this.interiorAddForm).then(res => {
                    // 解构
                    let {success, message} = res.data;
                    if (success) { // 后端返回的状态np
                        // 成功
                        console.log(res)
                        this.$message({ // elementUi里面的提供方法
                            message: "操作成功",
                            type: 'success'
                        });
                    } else {
                        // 失败
                        this.$message.error('操作失败');
                    }
                    //
                    this.interiorAddFormVisible = false;
                    // 重新加载数据
                    this.lodeListGridData();
                })
            }


        },
        mounted() { // 钩子方法
            this.lodeListDict();
            // 抽屉里面
            this.lodeListGridData();
        }
    }

</script>


<style>

</style>